<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 解绑事件</title>
</head>
<body>
<h3> 解绑事件</h3>
<p>
    解绑事件, 有2种写法 <br>
    on事件方式 <br>
    addEventListener方式
</p>
<hr>

<p>
    on事件方式，直接使用null覆盖偶就可以实现事件的解绑
</p>
<pre style="font-size: 20px;">
示例:
    // 绑定事件
    DOM元素.onclick = function () {
     alert('点击了')
    }
    // 解绑事件
    DOM元素.onclick = null // null值在JS里代表一个空对象
</pre>
<hr>
<p>
    addEventListener方式，必须使用：<br>
    removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
</p>
<p>
    注意：匿名函数无法被解绑
</p>
<hr>

<h3>两种注册事件的区别</h3>
<p>
    传统on注册（L0） <br>
    同一个对象,后面注册的事件会覆盖前面注册(同一个事件, 同名) <br>
    直接使用null覆盖偶就可以实现事件的解绑 <br>
    都是冒泡阶段执行 (只有冒泡,没有捕获)
</p>
<p>
    事件监听注册（L2） <br>
    语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获) <br>
    后面注册的事件不会覆盖前面注册的事件(同一个事件, 同名) <br>
    可以通过第三个参数,去确定是在 冒泡或者捕获阶段执行 <br>
    必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段) <br>
    匿名函数无法解绑, 必须 有名函数
</p>

<button class="按钮1">按钮1</button>
<button class="按钮2">按钮2</button>


<script>
    // ------ on事件方式 示例-----------
    // 绑定事件
    const 按钮1 = document.querySelector('.按钮1')
    按钮1.onclick = function () {
        alert('点击了,按钮1')
    }
    // L0 事件解绑
    按钮1.onclick = null // null值在JS里代表一个空对象

    // 点击 按钮1 没有反应,以为解绑了事件


    // ------ removeEventListener方式 示例-----------
    const 按钮2 = document.querySelector('.按钮')

    function 函数() {
        alert('点击了')
    }

    // 匿名函数 无法被解绑, 必须是 有名函数
    按钮2.addEventListener('click', 函数)
    // L2 事件解绑
    按钮2.removeEventListener('click', 函数)
</script>
</body>
</html>